<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="js/layui/css/layui.css" media="all">
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="body">
    <div class="layui-row" style="width: 95%; margin: 0 auto;">
        <form class="layui-form">
            <div class="layui-form-item">
                <div class="layui-col-md3" style="padding:0 10px;">
                    <div class="layui-card">
                        <div class="layui-card-header layui-colla-title">选择规格（单选）</div>
                        <div class="layui-card-body">
                            <ul lay-filter="goods_specs" id="goods_specs">
                                <li><input type="radio" lay-filter="goods_specs_id" name="specs_id" value="1" title="颜色"/></li>
                                <li><input type="radio" lay-filter="goods_specs_id" name="specs_id" value="2" title="尺码"/></li>
                                <li><input type="radio" lay-filter="goods_specs_id" name="specs_id" value="3" title="款式"/></li>
                            </ul>
                        </div>
                    </div>
                    
                    <div class="layui-card">
                        <div class="layui-row">
                            <input type="text" class="layui-input" id="specsName" name="specs_name" placeholder="请输入规格名称">
                        </div>
                    </div>
                    
                </div>
                <div class="layui-col-md9" style="padding:0 10px;">
                    <div class="layui-card">
                        <div class="layui-card-header layui-colla-title">选择规格值（可多选）</div>
                        <div class="layui-card-body">
                            <div class="layui-btn-container tag" id="addSpecsValueTag" lay-filter="addSpecsValueTag" lay-newTag="true" lay-allowclose="true">
                                <!-- 异步获取规格值 -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- <div class="layui-form-item"></div>
            <div class="layui-form-item">
                <div class="layui-row">
                    <button type="button" lay-filter="yes" id="sumbit" class="layui-btn" style="margin-left: 30%;">确定</button>
                </div>
            </div> -->
        </form>
    </div>
</div>
<script src="js/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script src="js/layui/layui.js" charset="utf-8"></script>
<script src="js/specsValue.js" charset="utf-8"></script>
<script>
    layui.config({
        base: "./js/",
        version: true
    }).extend({
        tag: 'tag/tag', //  Sku 
    });
    
    layui.use(['form', 'jquery', 'layer', 'tag'], function () {
        var $ = layui.jquery,
            form = layui.form,
			tag = layui.tag,
            layer = layui.layer;
            
        // 添加规格
        $("#specsName").blur(function(){
            var specs_name = this.value;
            var node = this;
            
            if (specs_name == '') {
                return false;
            }
            $.post('{:url("specs/save")}',{name:specs_name},function (res) {
                $('#specsName').val('');
                console.log(res);
                if(res.status == 1){
                    $('#goods_specs').append('<li><input type="radio" lay-filter="goods_specs_id" name="specs_id" value="'+ res.result.id +'" title="'+ res.result.name +'"/></li>');
                }
                form.render();
            });
        })
        
        
            
        // 选择规格获取规格值 -- 如果异步获取数据
        form.on('radio(goods_specs_id)', function(data) {
        	// console.log(data.value); //被点击的radio的value值
        	$.ajax({
        	    url:'js/specsValue.json',
        	    type: "GET",
        	    success(res){
                    console.log(res)
                    var html = '';
                    $('#addSpecsValueTag').html('');
                    $.each(res.result, function(i, v) {
                        $('[lay-filter="addSpecsValueTag"]').append('<button lay-text="'+ v.name +'" lay-id="'+ v.id +'" type="button" class="tag-item">'+ v.name +'</button>');
                    });
                    tag.render("addSpecsValueTag");
        	    }
        	})
        });
        
        // 添加规格值
        tag.on('add(addSpecsValueTag)', function(data){
            var specsId = $("input[type='radio']:checked").val();
            if (!specsId) {
                layer.alert('请选择规格', {icon: 5});
                return false;
            }
            $.ajax({
                url:'{:url("specsValue/save")}',
                data: {specs_id: specsId, name: data.value},
                type: "POST",
                success(res){
                    console.log(res);
                    $(this).attr('lay-id', res.result.id);
                }
            });
        });
        
        // 获取数据
        window.getSpecsData = function () {
            var specs_value = [];
            
            var specsId = $("input[type='radio']:checked").val();
            var specsName = $("input[type='radio']:checked").attr('title');
            
            var  allSpecsValueTag=$('#addSpecsValueTag').find("button")//找到 addSpecsValueTag 下面的所有 button
            for(var a = 0; a < allSpecsValueTag.length - 1; a++){
                specs_value.push({id: allSpecsValueTag.eq(a).attr('lay-id'), name: allSpecsValueTag.eq(a).attr('lay-text')})
            };
            
            var specsData = {id: specsId, name: specsName, propValueList: specs_value};
            return specsData;
        }
        
    });
</script>
</body>
</html>